<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>骡窝日报详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/newsContent.css">
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/easyEditor/easyEditor.min.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">


    <style>
        .footer {
            height: 40px;
            width: 100%;
            background-color: #f8f9fa;
            position: fixed;
            bottom: 0;
            margin-bottom: 0px;

        }
        div{ word-wrap: break-word; word-break: normal; }




        .wrap_ul{
            font-size: 0;
            list-style: none;
            width: 150px;
            height: 150px;
            margin-left: -30px;
            margin-bottom: -30px;
        }
        .wrap_ul li{
            font-size: 20px;
            line-height: 40px;
            border: 1px solid #f2f2f2;
            box-sizing: border-box;
            text-align: center;
        }
        .wrap{

            display: -webkit-box;
            white-space: nowrap;
            overflow: hidden;
            -webkit-backface-visibility: hidden;
            -webkit-perspective: 1000;
            -webkit-overflow-scrolling: touch;
            text-align: justify;
            overflow-x: initial;
        }
    </style>

    <script>
        $(function () {

            //当页面滚动条变化时，执行的函数
            $(window).scroll(function () {
                if ($(document).scrollTop() + $(window).height() >= $(document).height() + 40) {
                    var currentPage = currentInput.val();
                    //判断是否小于或等于最后一页,如果是就去查询
                    if (currentPage > 1) {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '已经到底了!',
                            autoClose: 1000
                        });
                    }
                }
            });

            var param = getParams()
            console.log(param);
            $.get('/newsContent/' + param.news_id + '/selectedNewsContent', function (data) {
                console.log(data);
                $(".newsDetail").renderValues(data, {
                    getCatalog: function (item, value) {
                        var html;
                        if (value == 1) {
                            html = '美图美文';
                        } else if (value == 2) {
                            html = '深度好文';
                        }
                        $(item).html(html);
                    }
                });
                $(".content").html(data.content.content);

                //获取5篇相关资讯文章
                $.get('/newsContent/newses', {catalog: data.catalog, id: data.id}, function (data) {
                    console.log(data);
                    $("#newsCommend").renderValues(data, {
                        getHref: function (item, value) {
                            //获取要跳转的地址
                            var href = $(item).data("href");
                            //把id拼接进去,再设置到a连接的href属性上
                            $(item).attr('href', href + value);
                        }
                    });
                    //设置第一个item添加active类
                    $(".carousel-item:first").addClass("active");


                })
            })

            /*//收藏功能
            $.get('/collects',{"dailyNews.id":param.news_id},function (data) {
                console.log(data);
                if (!data.success) {
                    $('#collectBtn').removeClass("fa-star-o");
                    $('#collectBtn').addClass("fa-star");
                }
            })

            //收藏日报的点击事件
            $('#collectBtn').click(function () {
                $.post('/collects/dailyNews',{"dailyNews.id":param.news_id},function (data) {
                    if (data.success) {
                        $('#collectBtn').removeClass("fa-star-o");
                        $('#collectBtn').addClass("fa-star");
                    }else {
                        $(document).dialog({
                            type : 'notice',
                            infoText: data.msg,
                            autoClose: 1500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    }
                })
            })*/

            //收藏功能
            $.get('/collects',{"dailyNews.id":param.news_id},function (data) {
                console.log(data);
                if (!data.success) {
                    $('#collectBtn').removeClass("fa-star-o");
                    $('#collectBtn').addClass("fa-star");
                }
            })
            //收藏游记的点击事件
            $('#collectBtn').click(function () {
                if ($('#collectBtn').hasClass("fa-star")) {
                    $.ajax({
                        url : "/collects" ,   // 处理的请求路径
                        type : "post" ,      // 此处发送的是delete请求（可变更为其他需要的请
                        data:{_method:"DELETE","dailyNews.id":param.news_id},
                        dataType : "json" , // 返回的数据类型为json类型
                        success : function(data) {
                            $('#collectBtn').removeClass("fa-star");
                            $('#collectBtn').addClass("fa-star-o");
                        }
                    }) ;
                    $(document).dialog({
                        type : 'notice',
                        infoText: '取消收藏成功',
                        autoClose: 500,
                        position: 'center'  // center: 居中; bottom: 底部
                    });
                }else {
                    $.post('/collects/travel',{"dailyNews.id":param.news_id},function (data) {
                        if(data.success){
                            $(document).dialog({
                                type : 'notice',
                                infoText: '收藏成功',
                                autoClose: 500,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                            $('#collectBtn').removeClass("fa-star-o");
                            $('#collectBtn').addClass("fa-star");
                        }else {
                            $(document).dialog({
                                type : 'notice',
                                infoText: data.msg,
                                autoClose: 1500,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                        }
                    })
                }

            })


            //获取评论详情渲染
            $.get('/dailyNewsComment' , {news_id:param.news_id},function (data) {
                $(".comment").renderValues(data,{
                    getHref: function (item, value) {
                        //获取要跳转的地址
                        var href = $(item).data("href");
                        //把id拼接进去,再设置到a连接的href属性上
                        $(item).attr('href', href + value);
                    }
                })
            })


            //获取评论总数(count)渲染
            $.get('/dailyNewsComment/'+ param.news_id , function (count) {
                $("#count").html(count);
            })

            //实例化一个easyEditor编辑器
            var editor = easyEditor('editor');
            //渲染完页面之后,点击按钮添加评论
            $("#sendLetterBtn").click(function () {
                //var content = $(".myCommont").val();
                //获取发送内容
                var data = editor.getContent({
                    emojiSign: ['[',']'], //表情分隔符
                    blockSign: '%' //行块分隔符
                });
                var content = data.text
                var user = JSON.parse(sessionStorage.getItem('user'));
                if(user==null){
                    window.parent.location.href="/login.html";
                }else{
                    $.post('/dailyNewsComment',{"user.id":user.id,"news.id":param.news_id,content:content},function (data) {
                        if(data.success){
                            window.parent.location.reload();
                        }
                    })
                }
            })


        })
    </script>
</head>

<body>
<div class="newsDetail">
    <div>
        <a href="javascript:history.go(-1);" style="position: absolute;top: 10px;left: 22px;">
            <span><i class="fa fa-chevron-left fa-2x" style="color: white;"></i></span>
        </a>
        <img render-src="coverImgUrl">

        <div class="container">
            <div class="row typeRow">
                <div class="col-4">
                    <span class="type" id="catalog" render-key="catalog" render-fun="getCatalog"></span>
                </div>
                <div class="col-2">
                </div>
                <div class="col-2">
                    <span>By</span>
                </div>
                <div class="col-4">
                    <span class="type" render-html="authorName"></span>
                </div>
            </div>

            <div class="detail">
                <h2 class="title" render-html="title"></h2>
                <div class="content"></div>
            </div>
        </div>
    </div>
    <hr>
    <div style="margin-bottom: 30px">
        <h6 class="module-title" style="font-weight: bolder">相关推荐</h6>
       <!-- <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div id="newsCommend">
                <div class="carousel-inner" render-loop="list">
                    <div class="carousel-item ">
                        <a data-href="newsContent.html?news_id=" render-key="list.id" render-fun="getHref">
                            <img class="d-block w-100" render-src="list.coverImgUrl" width="60%" height="100px">
                            <span class="recommend" render-html="list.title"></span>
                        </a>
                        <div class="createTime">
                            <span render-html="list.createTime"></span>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only"></span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only"></span>
            </a>
        </div>-->

        <div id="newsCommend">
            <div class="wrap" render-loop="list">
                <ul class="wrap_ul">
                    <li>
                        <a data-href="newsContent.html?news_id=" render-key="list.id" render-fun="getHref">
                            <img class="d-block w-100" render-src="list.coverImgUrl" style="height: 72px">
                            <span class="recommend" render-html="list.title" style="font-size: xx-small"></span>
                            <!--<span render-html="list.createTime" style="font-size: xx-small"></span>-->
                        </a>
                    </li>
                </ul>

            </div>
        </div>
    </div>
	<hr>
    <div>评论区</div>
    <div style="margin-bottom: 50px">
        <div class="count d-flex justify-content-between">
            <div class="p-2">用户评论<span id="count"></span></div>
        </div>

		<div class="panel panel-default">
			<div class="panel-body">
				<div class="comment">
					<div class="container " render-loop="list">
						<div class="row">
							<div class="col-2 comment-head">
								<a data-href="userProfiles.html?userId=" render-key="list.user.id" render-fun="getHref" class="col-2">
									<img class="rounded-circle" render-src="list.user.headImgUrl" style="height: 40px">
								</a>
							</div>
							<div class="col-10">
								姓名:<span render-html="list.user.nickName"></span>
								<span class="comment-date" render-html="list.releaseTime"></span>

								<div class="comment-content">
									<p render-html="list.content"></p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


    </div>
</div>

<div class="footer">

    <div class="d-flex justify-content-between">
        <!--<div class="p-2"><input type="text" class="myCommont"/><button id="releaseCommont"> 发表评论</button></div>-->
        <a  data-toggle="modal" data-target="#myModal"><div class="p-2" id="commentReply" ><i class="fa fa-commenting-o"></i> 添加你的评论</div></a>
        <div class="p-2"><i class="fa fa-star-o" id="collectBtn"></i>收藏</div>
    </div>
</div>

<!-- Modal：发送私信 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div id="editor" style="width:100%;height: 200px"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="closeModelBtn">关闭</button>
                <button type="button" class="btn btn-primary" id="sendLetterBtn">发送</button>
            </div>
        </div>
    </div>
</div>

</body>

</html>